<template>
  <div>
    <div class="main">
      <el-tabs>
        <el-tab-pane
          v-for="(item, i) in $gval.shicaiList"
          :key="i"
          :label="item.name"
        >
          {{ item.childrens }}

          <div class="childrens" v-for="(child, j) in item.childrens" :key="j">
            <div class="children-title">
              <h3>{{ child.name }}</h3>
              <span>共{{ child.itemList.length }}种</span>
            </div>
            <div class="children-item-box"></div>
          </div>
          
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabList: [
        { id: 1, name: "肉禽类" },
        { id: 2, name: "水产品" },
        { id: 3, name: "蔬菜" },
        { id: 4, name: "果品" },
        { id: 5, name: "米面豆乳" },
        { id: 6, name: "调味品" },
        { id: 7, name: "药食及其他" },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.main {
  width: 960px;
  margin: 0 auto;
}
</style>

